<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib uri="/typeUtil"  prefix="typeUtil"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input id="checkInId" type='hidden' value='${checkIn.id }'>
	当前入住信息:<br>
	房间类型:${typeUtil:getTypeName(room.typeId)}<br>
	房间名称:${room.name}<br>
	楼层:${room.floor }<br>
	单价:${typeUtil:getTypePrice(room.typeId)*room.discount/100.0 }元/日<br>
	当前总费用:${checkIn.cost }<br>
	请选择:<br>
	房间类型:<select id="typeId"></select> <br>
	房间名称:<select id="room"></select>	<br>
	价格:<label id='price'></label><br>
	<input type="hidden" id="calcPrice">
	图片:<img id='pic'><br>
	添加时间:<label id='addDate'></label><br>
	备注	
	<div id='zcomment'></div>
	<br>
	<input type="hidden" id="roomId">
	<button id="lock">锁定该房间</button>
	<br>
	<div id="changeReasonDiv">
		换房原因：<br>
		是否为客观原因：<input type="checkbox" id="objective"><br>
		<textarea rows="20" cols="20" id="changeReason"></textarea><br>
		<button id="submitChange">提交请求</button>&nbsp;&nbsp;<button id="cancelChange">取消请求</button>
	</div>
</body>
<style>
	#changeReasonDiv{
		display:none;
	}
</style>
<script type="text/javascript" src="/hotel/js/jquery.min.js"></script>
<script type="text/javascript" src="/hotel/js/timeUtil.js"></script>
<script type="text/javascript">
	function clearRoomInfor(){
		$('#roomId').val('')
		$('#price').text('')
		$('#pic').attr('src','')
		$('#addDate').text('')
		$('#zcomment').text('')
	}
	//更新房间信息
	function refreshRoomInfor(id){
		if(id!=null){
			$.get("/hotel/changeRoom/roomInfor",{'id':id},function(str){
				//alert(str)
				var res=eval('(' +str + ')')
				if(res.code!=0){
					alert(res.message)
					return;
				}
				room=res.object
				$('#roomId').val(room.id)
				$('#price').text(room.price+'元/日(房型折扣:'+room.typeDiscount+'%,房间折扣:'+room.discount+'%)')
				$('#calcPrice').val(room.price)
				$('#pic').attr('src','/hotel/upload/'+room.pic)
				$('#addDate').text(room.addDate)
				$('#zcomment').text(room.zcomment)
			})
		}
	}
	//更新类型选择列表
	function refreshTypeList(){
		$('#typeId').empty()
		$('#room').empty()
		$.get("/hotel/changeRoom/typeList",{},function(str){
			//alert(str)
			var res=eval('(' +str + ')')
			if(res.code!=0){
				alert(res.message)
				return;
			}
			types=res.object
			for(var i=0;i<types.length;i++){
				//alert(types[i].id+' '+types[i].name)
				$('#typeId').append('<option value='+types[i].id+'>'+types[i].name+'</option>')
			}
		})
	}
	
	//更新房间选择列表
	function refreshRoomList(id){
		$('#room').empty()
		$.get("/hotel/changeRoom/freeRoomList",{'id':id},function(str){
			//alert(str)
			var res=eval('(' +str + ')')
			if(res.code!=0){
				alert(res.message)
				return;
			}
			rooms=res.object
			for(var i=0;i<rooms.length;i++){
				//alert(types[i].id+' '+types[i].name)
				$('#room').append('<option value='+rooms[i].id+'>'+rooms[i].floor+'F-'+rooms[i].name+'</option>')
			}
			//$('#room').val(rooms[0].id)
			if(rooms.length>0){//如果有符合条件的房间
				refreshRoomInfor(rooms[0].id)	//更新房间信息
			}
		})
	}
	function lockRoom(id,code){
		$.post("/hotel/changeRoom/lockRoom",{'id':id,'code':code},function(str){
			//alert(str)
			var res=eval('(' +str + ')')
			if(res.code!=0){
				alert(res.message)
				refreshTypeList()
				return;
			}
		})
	}
	$('#typeId').change(function(){
		clearRoomInfor()
		refreshRoomList($('#typeId').val())
	})
	$('#room').change(function(){
		clearRoomInfor()
		refreshRoomList($('#typeId').val())
	})
	$('#lock').click(function(){
		$('#changeReasonDiv').css('display','block')
		if($('#lock').text()=='锁定该房间'){
			$('#lock').text('解锁该房间')
			lockRoom($('#roomId').val(),1)
		}else{
			$('#lock').text('锁定该房间')
			lockRoom($('#roomId').val(),0)
		}
	})
	$('#cancelChange').click(function(){
		$('#changeReasonDiv').css('display','none')
		if($('#objective').prop('checked'))
			$('#objective').click()//.checked=false;
		$('#changeReason').val('')
		$('#lock').text('锁定该房间')
		lockRoom($('#roomId').val(),0)
	})
	$('#submitChange').click(function(){
		data={'roomId':$('#roomId').val(),'checkId':$('#checkInId').val(),'objective':$('#objective').prop('checked')}
		$.post('/hotel/changeRoom/changeConfirm',data,function(str){
			var res=eval('(' +str + ')')
			if(res.code!=0){
				alert(res.message)
				return;
			}else{
				if(confirm('你需要补差价'+res.object+'元，您确定要换房吗？')){
					data={'roomId':$('#roomId').val(),'checkId':$('#checkInId').val(),'objective':$('#objective').prop('checked'),
							'reason':$('#changeReason').val()
					}
					$.post('/hotel/changeRoom/changeRoom',data,function(str){
						var res=eval('(' +str + ')')
						if(res.code!=0){
							alert(res.message)
							return;
						}else{
							window.location.href="/hotel/system/mainPage"
						}
					})
				}
			}
		})
	})
	refreshTypeList()
	</script>
</html>